<template>
    <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>
<script>
import { ref, toRefs, reactive } from 'vue'

export default {
    props: {
        treeData: {
            type: Array,
            default: []
        }
    },
    emits: ['select'],
    setup(props, ctx) {
        const state = reactive({
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        })

        const handleNodeClick = (data) => {
            ctx.emit('select', data)
        }

        return {
            ...toRefs(state),
            handleNodeClick
        }
    }
}
</script>
<style scoped>
:deep(.el-tree-node__content) {
    height: 30px;
}

:deep(.el-tree-node__label) {
    font-size: 12px;
}
</style>
